<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>分享的待办事项</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body class="bg-gray-50 min-h-screen">
<div class="container mx-auto px-4 py-8 max-w-2xl">
  <div class="bg-white rounded-lg shadow-md p-6 mb-6">
    <div class="flex justify-between items-center mb-4">
      <h1 class="text-2xl font-bold text-gray-800">分享的待办事项</h1>
      <span id="status-badge" class="px-3 py-1 rounded-full text-sm font-medium"></span>
    </div>

    <div class="mb-4">
      <h2 id="todo-title" class="text-xl font-semibold text-gray-900 mb-2"></h2>
      <p id="todo-content" class="text-gray-700"></p>
    </div>

    <div class="text-sm text-gray-500">
      <p>创建时间: <span id="created-at"></span></p>
      <p class="mt-1">分享链接有效期至: <span id="expires-at"></span></p>
    </div>
  </div>

  <div class="text-center text-gray-500 text-sm">
    <p>此为公开分享链接，任何人都可以查看</p>
  </div>
</div>

<script>
  // 获取URL中的分享令牌
  const urlParams = new URLSearchParams(window.location.search);
  const shareToken = urlParams.get('token');

  // 如果没有令牌，显示错误信息
  if (!shareToken) {
    document.body.innerHTML = `
                <div class="container mx-auto px-4 py-8">
                    <div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
                        <p>无效的分享链接</p>
                    </div>
                </div>
            `;
  } else {
    // 加载分享的待办事项
    fetch(`http://localhost:8080/todos/shared/${shareToken}`)
            .then(response => {
              if (!response.ok) {
                throw new Error('分享链接无效或已过期');
              }
              return response.json();
            })
            .then(todo => {
              // 填充页面数据
              document.getElementById('todo-title').textContent = todo.title || '无标题';
              document.getElementById('todo-content').textContent = todo.content || '无内容';
              document.getElementById('created-at').textContent = new Date(todo.createdAt).toLocaleString();

              // 设置状态徽章
              const statusBadge = document.getElementById('status-badge');
              if (todo.status === 'completed') {
                statusBadge.textContent = '已完成';
                statusBadge.className = 'px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800';
                document.getElementById('todo-title').classList.add('line-through', 'text-gray-500');
                document.getElementById('todo-content').classList.add('line-through', 'text-gray-500');
              } else {
                statusBadge.textContent = '待完成';
                statusBadge.className = 'px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800';
              }
            })
            .catch(error => {
              document.body.innerHTML = `
                        <div class="container mx-auto px-4 py-8">
                            <div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
                                <p>${error.message}</p>
                            </div>
                        </div>
                    `;
            });
  }
</script>
</body>
</html>
